<template>
  <div class="warpc">
    <div class="topbar"></div>
    <div class="bottom">
      <div class="bocont">
        <img src="chenkong/imgs/swipe/other/dk.gif" alt="" />

        <p>打卡</p>
      </div>
      <div class="bline"></div>
      <div class="bocont">
        <img src="chenkong/imgs/swipe/other/sp.gif" alt="" />

        <p>传视频</p>
      </div>
      <div class="bline"></div>

      <div class="bocont">
        <img src="chenkong/imgs/swipe/other/zp.gif" alt="" />

        <p>传照片</p>
      </div>
      <div class="bline"></div>
      <div class="bocont">
        <img src="chenkong/imgs/swipe/other/pj.gif" alt="" />

        <p>写评价</p>
      </div>
    </div>
  </div>
</template>

<script >
export default {};
</script>

<style lang="scss" scoped>
.warpc {
  //   border-top: 0.267vw solid #999;
  width: 100%;
  //   padding: 1.867vw 0 8vw 0;
  .topbar {
    height: 100%;
    height: 26.667vw;
  }
  .bottom {
    border-top: 0.267vw solid #999;
    width: 100%;
    padding: 1.867vw 0 8vw 0;
    // position: absolute;
    background: #fff;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;

    position: fixed;
    bottom: 0;

    .bocont {
      width: 24%;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    img {
      width: 5.867vw;
    }
    p {
      font-size: 2.667vw;
    }
    .bline {
      height: 5.867vw;
      width: 0.267vw;
      background: #f6f6f6;
    }
  }
}
</style>

